<template>
     <div class="friend_management" v-if="managementShow">
    <div class="f_man_content">
      <div class="f_m_head">
        <div>分组管理器</div>
        <img src="static/image/home/closeWindow.png" @click="$emit('update:managementShow',false) " />
      </div>
      <div class="f_m_main">
        <div class="friends_group">
          <div class="friends_g_count">全部联系人</div>
          <div class="friends_group_list">
            <div class="friends_group_item" :class="{ active: item.ID == curfriendGrouping.ID }" v-for="(item, index) in friendsGroup" @click="friendItemClick(index)" :key="'friend_' + index">
              {{ item.NAME }}
            </div>
          </div>
          <!-- <div class="add_f_group">
							<div class="add_f_icon" @click.stop.prevent="userCategoryShow=true"></div>添加分组
						</div> -->
        </div>
        <div class="friend_screening">
          <div class="friend_s_head">
            <div class="friend_h_l">{{ curfriendGrouping.NAME }}</div>
            <div class="friend_h_r">
              <span>移动到</span>
              <select v-model="moveGroup" @change="moveGroupChange">
                <option :value="value.ID" v-for="(value, k) in friendsGroup" :key="'movekey_' + k">
                  {{ value.NAME }}
                </option>
              </select>
            </div>
          </div>
          <div class="friend_s_main">
            <div class="management_wrapper">
              <div class="management_table">
                <div class="man_table_head">
                  <table cellspacing="0" cellpadding="0" border="0">
                    <colgroup>
                      <col width="35" />
                      <col width="120" />
                      <col width="121" />
                      <col width="121" />
                      <col width="121" />
                    </colgroup>
                    <thead>
                      <tr>
                        <th>
                          <div class="table_cell_right" @click.stop.prevent="friendSelAll">
                            <Checkbox v-model="fSelAll"></Checkbox>
                          </div>
                        </th>
                        <th>
                          <div class="table_cell">姓名</div>
                        </th>
                        <th>
                          <div class="table_cell">部门</div>
                        </th>
                        <th>
                          <div class="table_cell">职务</div>
                        </th>
                        <th>
                          <div class="table_cell">分组</div>
                        </th>
                      </tr>
                    </thead>
                  </table>
                </div>
                <div class="management_table_body">
                  <table cellspacing="0" cellpadding="0" border="0">
                    <colgroup>
                      <col width="35" />
                      <col width="120" />
                      <col width="121" />
                      <col width="121" />
                      <col width="121" />
                      <!---->
                    </colgroup>
                    <tr v-for="(item, index) in curfriendGrouping.USER" :key="'cgp_' + index">
                      <td>
                        <div class="table_cell_right" @click.stop.prevent="friendSl(item)">
                          <Checkbox v-model="item.isChecked"></Checkbox>
                        </div>
                      </td>
                      <td>
                        <div class="table_cell">{{ item.NAME }}</div>
                      </td>
                      <td>
                        <div class="table_cell">
                          {{ item.DEPARTMENTNAME || item.departmentnames}}
                        </div>
                      </td>
                      <td>
                        <div class="table_cell">{{ item.JOBTITLE|| item.jobTitle}}</div>
                      </td>
                      <td>
                        <select v-model="item.GROUPID" @change="groupingChange($event, item, index)">
                          <option :value="value.ID" v-for="(value, k) in friendsGroup" :key="'key_' + k">
                            {{ value.NAME }}
                          </option>
                        </select>
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
           
<script>
import { switchUserCategory_axios } from "@/api/home";
export default {
  watch: {
    "curfriendGrouping.USER": {
      handler(v) {
        console.log(v, "curfriendGrouping.USER");
        if (v.length == 0) {
          this.fSelAll = false;
        } else {
          this.fSelAll = v.every((t) => {
            return t.isChecked;
          });
        }
      },
      immediate: true,
      deep: true,
    },
  },
  props: ["myInfo", "managementShow", "friendsGroup", "curfriendGrouping"],
  data() {
    return {
      fSelAll: false,
      moveGroup: null,
    };
  },
  methods: {
    friendSl(item) {
      console.log(item, 125);
      // this.$set(item,'isChecked',!item.isChecked);
      for (let i = 0; i < this.curfriendGrouping.USER.length; i++) {
        if (item.ID == this.curfriendGrouping.USER[i].ID) {
          this.$set(
            this.curfriendGrouping.USER[i],
            "isChecked",
            !this.curfriendGrouping.USER[i].isChecked
          );
        }
        // if (!this.curfriendGrouping.USER[i].isChecked) {
        //   this.fSelAll = false;
        // }
      }

      this.fSelAll = this.curfriendGrouping.USER.every((t) => {
        return t.isChecked;
      });

      this.$forceUpdate();
    },
    friendSelAll() {
      this.fSelAll = !this.fSelAll;
      for (let i = 0; i < this.curfriendGrouping.USER.length; i++) {
        this.$set(this.curfriendGrouping.USER[i], "isChecked", this.fSelAll);
      }
    },
    groupingChange(e, item, index) {
      this.switchUserCategory(item, index);
    },

    // 转移分组
    switchUserCategory(item, index) {
      switchUserCategory_axios({
        userid: this.myInfo.id,
        categoryid: item.GROUPID,
        member: item.ID,
      })
        .then((res) => {
          if (res.result == 200) {
            for (let i = 0; i < this.friendsGroup.length; i++) {
              if (this.friendsGroup[i].ID == this.curfriendGrouping.ID) {
                for (let j = 0; j < this.friendsGroup[i].USER.length; j++) {
                  if (this.friendsGroup[i].USER[j].ID == item.ID) {
                    this.friendsGroup[i].USER.splice(j, 1);
                  }
                }
              }
              if (item.GROUPID == this.friendsGroup[i].ID) {
                item.isChecked = false;
                this.friendsGroup[i].USER.push(item);
              }
            }
            for (let i = 0; i < this.curfriendGrouping.USER.length; i++) {
              if (item.ID == this.curfriendGrouping.USER[i].ID) {
                this.curfriendGrouping.USER.splice(i, 1);
              }
            }
            this.$forceUpdate();
          } else {
            this.$Message.warning(res.msg);
          }
        })
        .catch((error) => {
          this.$Message.warning("服务器出错,稍后再试9");
        });
    },
    //好友分组管理,移动
    moveGroupChange() {
      this.$nextTick(() => {
        if (this.moveGroup == this.curfriendGrouping.ID) {
          return;
        }
        for (let i = 0; i < this.friendsGroup.length; i++) {
          if (this.moveGroup == this.friendsGroup[i].ID) {
            for (let j = 0; j < this.curfriendGrouping.USER.length; j++) {
              if (this.curfriendGrouping.USER[j].isChecked) {
                this.curfriendGrouping.USER[j].GROUPID = this.moveGroup;
                this.curfriendGrouping.USER[j].isChecked = false;
                this.switchUserCategory(this.curfriendGrouping.USER[j], j);
              }
            }
          }
        }
        this.moveGroup = null;
        this.fSelAll = false;
      });
    },
    friendItemClick(i) {
      this.$emit("friendItemClick", i);
    },
  },
};
</script>
<style scoped>
</style>